@charset "utf-8";

body{
	margin: 100px
}
/* 设置元素样式 */
div{
	width: 200px;
	height: 200px;
	border: solid 1px black;
	background-color: green;
	color: white;
	font-size: 1em;

	/* 设置背景和字体颜色采用过渡效果 */
	/*transition-property: background-color, font-size;*/
	/* 设置所有采用过渡效果 */
	/*transition-property: background-color, font-size, color;*/

	/* 单独设置过渡的样式，还不能够立刻实现效果。必须加上过渡所需的时间，因为默认情况下过渡时间为0 */
	/* 设置过渡时间为1s，如果是半秒钟可以设置为 .5s */
	/*transition-duration: 1.5s;*/

	/* 恒定速度*/
	/*transition-timing-function: linear;*/
	/* 加速 */
	/*transition-timing-function: ease-in;*/
	/* 减速 */
	/*transition-timing-function: ease-out;*/
	/* 先加速，再减速 */
	/*transition-timing-function: ease-in-out;*/

	/* 自定义缓动 */
	/*transition-timing-function: cubic-bezier(025, 0.67, 0.11, 0.55);*/

	/* 跳跃式过渡，开始时跳跃 */
	/*transition-timing-function: steps(1, start);*/
	/* 跳跃式过渡，结束时跳跃 */
	/*transition-timing-function: steps(1, end);*/


	/* 设置延迟效果 */
	/*transition-delay: 1s, 0s, 1s;*/
}

div{
	/* 单独声明 */
	/*transition: background-color 1s ease 0s, color 1s ease 0s, font-size 1s ease 0s;*/

	/* 使用 all 统一声明，版本兼容 */
	-webkit-transition: all 1s ease 0s;
	-moz-transition: all 1s ease 0s;
	-o-transition: all 1s ease 0s;
	-ms-transition: all 1s ease 0s;
	transition: all 1s ease 0s;
}

/* 鼠标悬停后背景变成蓝色，文字黑色 */
div:hover{
	margin-left: 100px;
	background-color: gray;
	color: black;
	font-size: 1.5em;
}